You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.1 KiB
67 lines
2.1 KiB
import Link from "next/link";
|
|
import { getDictionary, type Locale } from "@/lib/site-content";
|
|
|
|
export default async function PricingPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ locale: string }>;
|
|
}) {
|
|
const { locale } = await params;
|
|
const dictionary = getDictionary(locale as Locale);
|
|
|
|
return (
|
|
<div className="page-stack">
|
|
<section className="section-panel hero-tight">
|
|
<div className="section-heading">
|
|
<div className="eyebrow">{dictionary.pricing.tag}</div>
|
|
<h1>{dictionary.pricing.title}</h1>
|
|
<p>{dictionary.pricing.subtitle}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="pricing-grid">
|
|
{dictionary.pricing.plans.map((plan) => (
|
|
<article
|
|
className={`pricing-card ${plan.highlight ? "pricing-card-highlight" : ""}`}
|
|
key={plan.name}
|
|
>
|
|
<div className="pricing-top">
|
|
<div>
|
|
<span className="card-kicker">{plan.badge}</span>
|
|
<h2>{plan.name}</h2>
|
|
</div>
|
|
<div className="price-line">
|
|
<strong>{plan.price}</strong>
|
|
<span>{plan.cadence}</span>
|
|
</div>
|
|
</div>
|
|
<p className="pricing-summary">{plan.summary}</p>
|
|
<ul className="bullet-list">
|
|
{plan.features.map((feature) => (
|
|
<li key={feature}>{feature}</li>
|
|
))}
|
|
</ul>
|
|
<Link className="button button-dark" href={`/${locale}/login`}>
|
|
{plan.cta}
|
|
</Link>
|
|
</article>
|
|
))}
|
|
</section>
|
|
|
|
<section className="section-panel">
|
|
<div className="section-heading">
|
|
<div className="eyebrow">{dictionary.pricing.faqTag}</div>
|
|
<h2>{dictionary.pricing.faqTitle}</h2>
|
|
</div>
|
|
<div className="faq-grid">
|
|
{dictionary.pricing.faqs.map((faq) => (
|
|
<article className="faq-card" key={faq.question}>
|
|
<h3>{faq.question}</h3>
|
|
<p>{faq.answer}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|